<template>
  <el-card class="box-card scroll-item" v-scroll-reveal.reset shadow="always">
    <div slot="header" class="me-name">
      <i class="iconfont icon-mingpian"></i>
      <span>我的名片</span>
    </div>
    <div class="me-description">
      <p>网名：Mr.Yong| 心若向阳</p>
      <p>职业：PHP开发攻城狮</p>
      <p>现居：广东省-深圳市</p>
      <p>Email：m.yong@foxmail.com</p>
      <p>QQ：1650464351</p>
    </div>
    <div class="me-tool">
      <!-- <i @click="showTool(qq)" :title="qq.title" class="iconfont icon-QQ"></i> -->
      <!-- <i @click="showTool(github)" :title="github.title" class="iconfont icon-github"></i> -->
      <!-- <i @click="showTool(gitee)" :title="gitee.title" class="iconfont icon-gitee-fill-round"></i> -->
      <!-- <i @click="showTool(wechat)" :title="wechat.title" class="iconfont icon-wechat1"></i> -->
      <!-- <i @click="showTool(email)" :title="email.title" class="iconfont icon-email"></i> -->

      <el-popover
        v-for="(item,index) in info" :key="index"
        placement="top-start"
        title=""
        width="100"
        trigger="hover"
        content="">

        <el-image v-if="item.type == 'img'" :src="item.src">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <a v-if="item.type == 'link'" target="_blank" :href="item.src">{{item.title}}</a>
      <el-button slot="reference"><i :title="item.title" :class="'iconfont icon-'+item.icon"></i></el-button>
    </el-popover>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Me',
  data () {
    return {
      info:[
        {
          type:'img',
          src:'/static/img/qq.jpg',
          icon:'QQ',
          title:'QQ'
        },{
          type:'img',
          src:'/static/img/wechat.jpg',
          icon:'wechat1',
          title:'微信'
        },{
          type:'link',
          src:'https://gitee.com/yong-top',
          icon:'gitee-fill-round',
          title:'我的码云'
        },{
          type:'link',
          src:'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=Fns4b3l4cVZweW57d396OHV5ew',
          icon:'email',
          title:'发送邮件'
        }
      ],
    }
  },
  methods:{
      showTool(tool) {
        this.$message({
          duration: 3000,
          showClose: true,
          dangerouslyUseHTMLString: true,
          offset:100,
          message: '<strong>' + tool.message + '</strong>'
        });
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.me-name
  i 
    font-size 20px
    color #ff9401
    font-weight bold
  span
    font-weight bold
.me-description
  text-align left 
  p
    padding 3px 0
    line-height 1.5
  span
    padding 0 5px
.me-tool
  text-align center
  padding-top 10px
  .el-button
    padding 12px 10px
    border none
  span
    margin 0 5px
  i
    cursor pointer
    padding 4px 10px
    font-size 30px

</style>
